<template>
  <div class="Home">
    <div class="movie-box">
      <div v-for="item in movieList" :key="item.id" class="movie-item">
        <el-image style="width: 150px; height: 113px" :src="item.img">
        </el-image>

        <div class="movie-item-content" @click="jumpPlayer(item.id)">
          <p class="title">
            {{ item.name }}
          </p>
          <span style="font-size: 13px">
            评分: <a href="#" style="color: red">{{ item.level }}</a>
          </span>
        </div>
        <div style="margin-top: 10px">
          <p style="font-size: 12px; color: #949494">{{ item.memo }}</p>
        </div>
      </div>
    </div>
    <!-- 分页开始 -->
    <div style="margin: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="pageNum"
        :page-sizes="[5, 12, 18]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      //定义movieList数组
      movieList: [],
      //一页6条
      pageSize: 18, //默认为10
      pageNum: 1,
      searchMovie: "", //搜索需要的值,为空即可,反正不能搜索
      area: 2, //0内地 1港台 2欧美
      total: 0,
      currentPage: 1,
    };
  },
  created() {
    this.getMovie();
  },
  methods: {
    //获取电影资源
    getMovie() {
      request
        .get("/movie/findArea", {
          params: {
            //传入变量
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            name: this.searchMovie,
            area: this.area,
          },
        })
        .then((res) => {
          console.log("分类查询到的数据" + res.data.list);
          //重点 将查询到的数据records 返回给表单中的tableData
          this.movieList = res.data.list;
          this.total = res.data.total;
        });
    },
    //跳转播放电影界面
    jumpPlayer(id) {
      console.log("传出去的id: " + id);
      this.$router.push({ path: "/player", query: { id } });
    },
    //改变条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getMovie();
    },

    //改变当前页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getMovie();
    },
  },
};
</script>

<style>
.home {
  width: 1000px;
}
.movie-content {
  display: flex;
  flex-wrap: wrap;
}
/* 
  ==
  ==  电影卡片展示栏
  ==  css
  ==
  ==

*/

.movie-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  justify-content: space-between;
}
.movie-item {
  width: 150px;
  height: 168px;
  /* margin-top: 20px;
  margin-left: 15px; */
  margin-top: 25px;
  text-align: center;
  margin-top: 15px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.title {
  width: 60px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 文字缩放为省略号 */
}
.movie-item-content {
  display: flex;
  justify-content: space-around;
}

.movie-item-content :hover {
  color: rgb(88, 117, 209);
}

/* 
== css结束
*/
</style>